<!DOCTYPE html>
<html>
<head>
    <title>LUI组件库</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="Cache-Control" CONTENT="no-cache">
    <meta http-equiv="Pragma" CONTENT="no-cache">
    <meta name="keywords" content=""/>
    <meta name="description" content="" />
    <link rel="icon" href="images/icon/lui.png">
    <link rel="stylesheet" type="text/css" href="css/lui.css" />
</head>
<body>
    <div class="ui_page_wrap">
        <header class="ui_page_hd"><a href="javascript:history.go(-1);" class="ui_back"></a>图片懒加载</header>
        <div class="ui_page_bd" id="main">
            <p class="ui_con_block">
                图片懒加载，让网页加载速度更快。
            </p>
            <script type="text/html" id="tpl">
                <ul class="ui_list ui_list_margin">
                    {{# for(var i = 0,len = d.results.length;i< len;i++ ){ }}
                        <li>
                            <h2 class="list_tit">{{d.results[i].who}}</h2>
                            <figure class="mb5"><img width="100%" src="images/icon/transparent.png" data-src="{{d.results[i].url}}" class="loading_gif"></figure>
                            <time class="f12" style="color:#a7bac8">{{d.results[i].desc}}</time>
                        </li>
                    {{# } }}
                </ul>
            </script>
            <div id="tpl_view"></div>
        </div>
    </div>

<!--公共js-->
<script type="text/javascript" src="js/lui.js"></script>
<script type="text/javascript" src="js/3rd-plugins/laytpl.js"></script> 
<!--图片懒加载-->
<script type="text/javascript" src="js/3rd-plugins/lazy-load-img.js"></script>
<script type="text/javascript">
    function loadData(){
        lui.request({
            url: 'http://gank.io/api/data/\u798f\u5229/20/1',
            type: 'GET',
            dataType: 'json',
            success:function(data) {
                if(data.error){
                alert('服务器响应异常！');
                return
              }
              if(! data.results || ! data.results.length){
                alert('数据不存在！');
                return 
              }

                var gettpl = document.getElementById('tpl').innerHTML;
                laytpl(gettpl).render(data, function(html){
                    document.getElementById('tpl_view').innerHTML = html;

                    var lazyLoadImg = new LazyLoadImg({
                        el: document.querySelector('#tpl_view'),
                        //mode: 'diy', //默认模式，将显示原图，diy模式，将自定义剪切，默认剪切居中部分
                        time: 300, // 设置一个检测时间间隔
                        complete: true, //页面内所有数据图片加载完成后，是否自己销毁程序，true默认销毁，false不销毁
                        position: { // 只要其中一个位置符合条件，都会触发加载机制
                            top: 0, // 元素距离顶部
                            right: 0, // 元素距离右边
                            bottom: 0, // 元素距离下面
                            left: 0 // 元素距离左边
                        },
                        diy: { //设置图片剪切规则，diy模式时才有效果
                            backgroundSize: 'cover',
                            backgroundRepeat: 'no-repeat',
                            backgroundPosition: 'center center'
                        },
                        before: function () { // 图片加载之前执行方法

                        },
                        success: function (el) { // 图片加载成功执行方法
                            el.classList.add('success')
                        },
                        error: function (el) { // 图片加载失败执行方法
                            el.src = 'images/icon/del.png'
                        }
                    })

                });
                // lazyLoadImg.start() // 重新开启懒加载程序
                // lazyLoadImg.destroy() // 销毁图片懒加载程序
            }
        });
    }

    loadData();

</script>
</body>
</html>